<template>
  <div style="padding-top:80px;width:100%">
    <div class="search" style="width:100%;height:64px;padding-left:17px;display:flex">
     <span style="width:73px;height:36px;padding-right:12px;font-size:14px;line-height:36px;margin-left:10px">工单编号:</span><el-input style="width:210px;height:36px" v-model="search.taskCode" placeholder="请输入"></el-input>
     <span style="width:73px;height:36px;padding-right:12px;font-size:14px;line-height:36px;margin-left:10px">工单状态:</span>
     <el-select clearable v-model="search.status" filterable placeholder="请选择">
        <el-option style="width:210px;height:36px" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
     </el-select>
     <el-button type="primary" icon="el-icon-search" style=";margin-left:10px;width:80px;height:36px;display:flex" class="search-button" @click="searchbtn">搜索</el-button>
    </div>
    <div class="orders" style="width:100%;;margin-top:20px;padding:10px 15px 19px 17px;">
        <div class="createorders" style="width:100%;margin-bottom:20px">
          <el-button type="primary"  icon="el-icon-circle-plus-outline" class="neworder" @click="newOrder">新建</el-button>
          <el-button type="primary" class="setorder" @click="alert=true">工单配置</el-button>
        </div>
    <div style="width:100%">
      <el-table  :data=" this.searchinfo.currentPageRecords" style="width:100% ;fontSize:14px">
        <el-table-column style="height:42px" type="index" fit label="序号" />
        <el-table-column style="height:42px" prop="taskCode" fit label="工单编号"  />
        <el-table-column style="height:42px" prop="innerCode" fit label="设备编号" />
        <el-table-column style="height:42px" prop="taskType.typeName" fit label="工单类型" />
        <el-table-column style="height:42px" prop="createType" fit label="工单方式"  />
        <el-table-column style="height:42px" prop="taskStatusTypeEntity.statusName" fit label="工单状态" />
        <el-table-column style="height:42px" prop="userName" fit label="运营人员" />
        <el-table-column style="height:42px" prop="createTime" fit label="创建日期" width="170" />
        <el-table-column style="height:42px" prop="查看详情" fit label="操作" >
           <template v-slot="{row}">
            <a href="javascript:;" @click="opendetailFn(row.taskId)">查看详情</a>
           </template>
        </el-table-column>
      </el-table>
    </div>
  <div class="pageinfo" style="width:100%;height:96px;padding:32px 16px;line-height:32px;display:flex;justify-content:space-between">
    <span>共{{ this.searchinfo.totalCount}}条记录  第{{ this.searchinfo.pageIndex}}/{{ this.searchinfo.totalPage}} 页</span>
    <div style="display:flex">
      <el-button class="pagebutton" :disabled="searchinfo.pageIndex==='1'" style="width:70px;height:32px" @click="pageup">上一页</el-button>
      <el-button class="pagebutton" :disabled="searchinfo.pageIndex>=searchinfo.totalPage" style="width:70px;height:32px" @click="pagedown">下一页</el-button>
    </div>
  </div>
    </div>
    <!-- 新建 -->
  <NewOrder :visible.sync="visible"/>
    <!-- 补货警戒弹窗 -->
  <Alert :alert.sync="alert"/>
  <!--详情页 -->
  <Detail
  v-if="opendetail"
  :opendetail.sync="opendetail"
  :detail="detail"
  />
  </div>
</template>

<script>
import { searchtask, getdetail } from '@/api/orders'
import NewOrder from '@/views/orders/components/form.vue'
import Alert from '@/views/orders/components/alert.vue'
import Detail from '@/views/orders/components/detail.vue'
export default {
  components: { NewOrder, Alert, Detail },
  data () {
    return {
      searchinfo: {// 存放表单数据
      },
      options: [{ // 搜索栏下拉菜单的 选项
        value: '1',
        label: '代办'
      }, {
        value: '2',
        label: '进行'
      }, {
        value: '3',
        label: '取消'
      }, {
        value: '4',
        label: '完成'
      }],
      // type:[{typeId: 1, typeName: "投放工单", type: 1},
      //       {typeId: 2, typeName: "补货工单", type: 2},
      //       {typeId: 3, typeName: "维修工单", type: 1},
      //       {typeId: 4, typeName: "撤机工单", type: 1}
      //       ],
      search: {
        status: '', // 下拉菜单 选择的值
        taskCode: '', // 搜索框的 搜索的工单编号
        isRepair: false,
        pageIndex: 1,
        pageSize: 10
      },
      orderstatus: '',
      index: 1, // 表单索引的初始值
      test: [],
      visible: false,
      alert: false,
      opendetail: false, // detail部分的数据
      detail: {}
    }
  },
  async created () {
    const { data } = await searchtask(this.search)
    console.log(data)
    this.searchinfo = data
    console.log(this.searchinfo.currentPageRecords)
    this.newsearchinfo()
  },
  methods: {
    async pageup () { // 上一页
      if (this.searchinfo.pageIndex === 1) return
      this.search.pageIndex--
      const { data } = await searchtask(this.search)
      console.log(data)
      this.searchinfo = data
      this.newsearchinfo()
    },
    async pagedown () { // 下下一页
      if (this.searchinfo.pageIndex === this.searchinfo.totalPage) { return }
      this.search.pageIndex++
      const { data } = await searchtask(this.search)
      console.log(data)
      this.searchinfo = data
      this.newsearchinfo()
    },
    async searchbtn () { // 搜索按钮
      this.search.pageIndex = 1// 翻页时根据pageindex增减发送请求,获得不同页的数据, 搜索时要讲页码归1,获得第一页的搜索数据
      const { data } = await searchtask(this.search)
      console.log(data)
      this.searchinfo = data
      this.newsearchinfo()
    },
    newsearchinfo () { // 修改 要渲染的数据
      this.searchinfo.currentPageRecords.forEach(item => {
        if (item.createType === '0') {
          item.createType = '自动'
        } else {
          item.createType = '手动'
        }
        item.createTime = item.createTime.split('T').join(' ')
        item.updateTime = item.updateTime.split('T').join(' ')
      })
    },
    newOrder () {
      this.visible = true
    },
    async opendetailFn (id) {
      const { data } = await getdetail(id)
      this.opendetail = true
      this.detail = data
      console.log(data)
    }
  },
  computed: {

  }

}
</script>

<style lang="less" scoped>
.search{
  .el-button{
    line-height: 12px;
    padding: 10px 25px 25px 13px;

  }

  align-items: center;
  }
  i{
    line-height: 0;
  }
/deep/.search-button{
  line-height: 12px;
}
.orders{
.el-button--primary.neworder, .el-button--primary.neworder {
  padding: 0px 0px;
  width: 80px;
  height:36px;
  border: 0px;
  background: linear-gradient(135deg,#ff7d43,#db3602)!important;
}
.neworder.el-button--primary:focus, .neworder.el-button--primary:hover {
  background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
}
.el-button--primary.setorder, .el-button--primary.setorder {
   padding: 0px 0px;
    width: 80px;
    height:36px;
    background-color: #fbf4f0!important;
    border: none;
    color: #655b56!important
}
.setorder.el-button--primary:focus, .setorder.el-button--primary:hover {
  background: #f3e7e1!important;
}
}
.pageinfo{
  .pagebutton{
    width: 70px;
    height: 32px;
    margin: 0 16px;
    border-radius: 2px;
    background-color: #d5ddf8;
    padding: 0px 0px 0px 0px;

  }
}
</style>
